<template>
    <view>
        <Navbar :hideBtn="false" bgColor="#f3f4f6"></Navbar>
        <view style="background-color: #2b85e4; padding: 40rpx;">
            <view style="width: 140rpx; height: 140rpx; border: 1px solid #fff; border-radius: 50%; margin: 0 auto;">
                <u-avatar :src="avatar" size="120rpx" style="margin: 10rpx;"></u-avatar>
            </view>
        </view>
        <view style="padding: 40rpx;">
            <u--form :model="userInfo" ref="uForm" labelWidth="160rpx" labelAlign="left">
                <u-form-item label="姓名" prop="nickName" class="u-border-bottom">
                    <u--input
                            placeholder="请输入内容"
                            border="none"
                            v-model="userInfo.nickName"
                    ></u--input>
                </u-form-item>
<!--                <u-form-item label="性别" prop="sex" class="u-border-bottom">
                    <u-radio-group v-model="userInfo.sex" size="36rpx">
                        &lt;!&ndash;            <u-radio shape="circle" label="男" name="1" labelSize="32rpx"></u-radio>&ndash;&gt;
                        &lt;!&ndash;            <u-radio shape="circle" label="女" name="2" labelSize="32rpx" style="margin-left: 36rpx;"></u-radio>&ndash;&gt;
                        <u-radio shape="circle"
                                 v-for="dict in dict.type.sys_user_sex"
                                 :key="dict.value"
                                 :label="dict.label"
                                 :name="dict.value"
                                 labelSize="32rpx"
                        ></u-radio>
                    </u-radio-group>
                </u-form-item>-->

                <u-form-item label="性别" prop="sex" class="u-border-bottom" borderBottom @click="showSex = true; hideKeyboard()">
                    <u--input v-model="getSexText" disabled disabledColor="#ffffff" placeholder="请选择性别"
                              border="none"></u--input>
                    <u-icon slot="right" name="arrow-right"></u-icon>
                </u-form-item>
                <u-form-item label="手机号码" prop="phonenumber" class="u-border-bottom">
                    <u--input
                            placeholder="请输入内容"
                            border="none"
                            v-model="userInfo.phonenumber"
                    ></u--input>
                </u-form-item>
                <u-form-item label="邮箱" prop="email" class="u-border-bottom">
                    <u--input
                            placeholder="请输入内容"
                            border="none"
                            v-model="userInfo.email"
                    ></u--input>
                </u-form-item>
            </u--form>
        </view>
        <view style="padding: 40rpx;">
            <u-row gutter="32">
                <u-col span="6">
                    <u-button icon="arrow-left" text="返回" plain @click="goBack()"></u-button>
                </u-col>
                <u-col span="6">
                    <u-button icon="checkmark-circle" text="保存" @tap="submit" type="primary"></u-button>
                </u-col>
            </u-row>
        </view>
        <u-action-sheet :show="showSex" :actions="actions" title="请选择性别"
                        @close="showSex = false" @select="sexSelect"></u-action-sheet>
    </view>
</template>

<script>
    import Navbar from '@/components/navbar/Navbar'
    import URadio from "@/uni_modules/uview-ui/components/u-radio/u-radio";
    import {updateUserProfile} from "@/api/user";
    import {validateCellPhone} from "@/utils/validate";
    import {environment} from "@/config/environment";
    import {isEmpty} from "@/utils/verify";

    export default {
        dicts: ['sys_user_sex'],
        components: {
            URadio,
            Navbar,
        },
        data() {
            return {
                avatar: '/static/img/avatar.png',
                userInfo: {
                    nickName: '',
                    sex: '',
                    phonenumber: '',
                    email: '',
                },
                showSex: false,
                actions: [],
                rules: {
                    phonenumber: [
                        {required: true, message: "手机号码不能为空", trigger: "blur"},
                        {
                            validator: validateCellPhone,
                            trigger: "blur"
                        }
                    ],
                    nickName: [
                        { required: true, message: "用户昵称不能为空", trigger: "blur" }
                    ],
                    email: [
                        { required: true, message: "邮箱地址不能为空", trigger: "blur" },
                        {
                            type: "email",
                            message: "请输入正确的邮箱地址",
                            trigger: ["blur", "change"]
                        }
                    ],
                }
            };
        },
        methods: {
            getInfo() {
                this.$store.dispatch('Info').then(res => {
                    this.userInfo = res.user
                    let avatar = res.user.avatar;
                    this.avatar = isEmpty(avatar) ? '/static/img/avatar.png' : environment.fileUrl + avatar;
                })
            },
            goBack() {
                uni.navigateBack({delta: 1});
            },
            hideKeyboard() {
                uni.hideKeyboard()
            },
            sexSelect(e) {
                this.userInfo.sex = e.value
                // this.$refs.uForm.validateField('userInfo.sex')
            },
            submit() {
                this.$refs.uForm.validate().then(res => {
                    if (res) {
                        updateUserProfile(this.userInfo).then(response => {
                            uni.$u.toast(response.msg);
                        });
                    }
                }).catch(errors => {
                    debugger;
                    uni.$u.toast('校验失败')
                })
            },
        },
        computed: {
            getSexText: {
                set() {
                },
                get() {
                    this.actions = [];
                    let sysUserSex = this.dict.type.sys_user_sex;
                    for (const item of sysUserSex) {
                        this.actions.push({"name": item.label, "value": item.value});
                    }
                    let dict = sysUserSex[this.userInfo.sex];
                    if (dict) {
                        return dict.label;
                    }
                }
            }
        },
        created() {
            this.getInfo()
        },
        onReady() {
            // 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
            this.$refs.uForm.setRules(this.rules)
        },
    };
</script>

<style lang="sass" scoped>

</style>